/**
 * @description render elem
 * @author snake
 */

import { h, VNode } from 'snabbdom'

/**
 * renderPlaceholder 渲染 placeholder 元素到编辑器
 * @param {*} elem 
 * @param {*} children 
 * @param {*} editor 
 * @returns 
 */
function renderPlaceholder(elem, children, editor) {
  const { string, ...props } = elem

  // 构建容器 vnode
  const containerVnode = h(
    'span',
    {
      props: {
        contentEditable: 'false'
      },
      style: {
        display: 'inline-block', // inline
        color: 'rgb(45, 140, 240)',
        backgroundColor: 'rgb(235, 245, 255)',
        padding: '0 4px',
        margin: '0 4px',
        cursor: 'pointer'
      },
      on: {
        mousedown: (e) => e.preventDefault()
      }
    },
    [string]
  )

  return containerVnode
}

const conf = {
  type: 'placeholder', // 新元素 type ，重要！！！
  renderElem: renderPlaceholder
}

export default conf
